<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Menu</title>
    <style>
        /* 设置背景颜色和文字颜色 */
        body {
            background-color: #f7f7f7;
            color: #333;
        }

        /* 将menu部分设置为固定定位，覆盖在页面左边 */
        #menu {
            position: fixed;
            top: 50px; /* 修改top属性值，以避免遮挡header */
            left: 0;
            bottom: 0;
            z-index: 1;
            background-color: #333;
            color: #fff;
            width: 200px;
            padding: 20px;
        }

        /* 根据需要设置菜单和子菜单的样式 */
        #menu ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #menu ul li {
            margin-bottom: 10px;
        }

        #menu ul li a {
            color: #fff;
            text-decoration: none;
        }

        #menu ul li ul {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-top: 10px;
        }

        #menu ul li ul li {
            margin-bottom: 5px;
        }

        #menu ul li ul li a {
            color: #ccc;
            text-decoration: none;
        }

        #menu ul li ul li a:hover {
            color: #fff;
        }

        /* 设置padding-left属性，以避免menu遮挡header与footer */
        body > * {
            padding-left: 200px;
        }
    </style>
</head>
<body>
<nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
            </ul>
        </li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">FAQs</a></li>
    </ul>
</nav>
</body>
</html>
